import { Modal, Button, Image, ButtonGroup } from "@douyinfe/semi-ui";
import { useState, useCallback } from "react";
// import { HISTORY_MODAL_ITEMS_COUNT } from '../constants';
import styles from "./historyModal.module.scss";


/**
 * 历史文件模态框组件
 * @param {Object} props
 * @param {boolean} props.visible - 是否可见
 * @param {Function} props.onCancel - 取消回调
 * @param {Function} props.onConfirm - 确认回调
 * @param {string} props.uploadingKey - 上传中的key
 */
function HistoryModal({ visible, onCancel, onConfirm, isShowArea, imageHistoryList = [], uploadingKey = '' }) {
  // 添加状态管理，默认选中'主体'
  const [selectedType, setSelectedType] = useState("subject");
  const [selectedImageUrl, setSelectedImageUrl] = useState('');
  const [selectedIndex, setSelectedIndex] = useState(-1);


  const handleCancel = () => {
    setSelectedIndex(-1);
    setSelectedType('subject');
    setSelectedImageUrl('');
    onCancel?.();
  };

  const handleConfirm = () => {
    let obj = {
      imageUrl: selectedImageUrl,
      referType: selectedType,
    }
    onConfirm?.(uploadingKey, obj);
    setSelectedImageUrl('');
    setSelectedType('subject');
    setSelectedIndex(-1);
  };

  // 处理按钮点击
  const handleTypeSelect = type => {
    setSelectedType(type);
  };

  const ReferArea = useCallback(() => {
    return (
      <div className={styles.customFooterTitle}>
        <span>请选择参考区域:</span>
        <ButtonGroup>
          <Button
            className={selectedType === 'subject' ? styles.selectedButton : styles.unselectedButton}
            onClick={() => handleTypeSelect('subject')}>
            主体
          </Button>
          <Button
            className={
              selectedType === 'backGround' ? styles.selectedButton : styles.unselectedButton
            }
            onClick={() => handleTypeSelect('backGround')}>
            背景
          </Button>
        </ButtonGroup>
      </div>
    );
  }, [selectedType, handleTypeSelect]);

  const handleSelectImage = useCallback((item, index) => {
    setSelectedImageUrl(item);
    setSelectedIndex(index);
  }, []);

  return (
    <Modal
      title="历史文件"
      closable={false}
      visible={visible}
      width={1216}
      height={792}
      centered
      className={styles.historyModal}
      footer={
        <div style={{display: isShowArea ? 'flex' : 'block', justifyContent: "space-between"}} className={[styles.customFooter, !isShowArea && styles.customFooterShowArea]}>
          {isShowArea && ReferArea()}

          <div className={styles.historyModalButton}>
            <Button
              onClick={handleCancel}
              className={`${styles.button} button buttonDefault`}
            >
              取消
            </Button>
            <Button
              disabled={!selectedImageUrl}
              onClick={handleConfirm}
              className={`${styles.button} button buttonPrimary`}
            >
              确认
            </Button>
          </div>
        </div>
      }
    >
      <div className={styles.historyModalList}>
        {imageHistoryList.map((item, index) => (
          <div key={index} className={`${styles.historyModalItem} ${selectedIndex === index ? styles.selectedItem : ''}`} onClick={() => handleSelectImage(item, index)}>
            <Image
              src={item}
              preview={false}
              className={styles.img}
              draggable={false}
            />
          </div>
        ))}
      </div>
    </Modal>
  );
}

export default HistoryModal;
